<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKECHERS-购物车</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="reset.css">
    <style>
        .content-con .title {
            font-size: 18px;
            color: #434343;
            margin-bottom: 66px;
            cursor: pointer;
            width: 295px;
        }
        
        .content-con .title span:nth-of-type(1) {
            width: 20px;
            height: 14px;
            display: inline-block;
            background: url(img/spritecow.png) no-repeat -30px -5px;
            cursor: pointer;
        }
        
        .contentL {
            height: 100px;
            width: 11.6%;
            /* background: burlywood; */
            float: left;
        }
        
        .contentR {
            width: 85%;
            /* background: palevioletred; */
            /* height: 1000px; */
            float: left;
        }
        
        .content-con {
            width: 92%;
            margin: 0 auto;
        }
        /* .content {
            height: 1500px;
            flex: 1;
        } */
        
        .contentR img {
            width: 100%;
            margin-bottom: 50px;
        }
        
        .cartleftlist {
            width: 594px;
            height: 154px;
            border: 1px solid #c9c9c9;
            margin-top: 30px;
        }
        
        .cartleft {
            width: 594px;
            float: left;
        }
        
        .cartright {
            width: 400px;
            height: 502px;
            background: #444;
            position: absolute;
            right: 0;
            top: -21px;
            box-sizing: border-box;
            padding: 30px 25px;
            border-radius: 3px;
        }
        
        .carttitle {
            width: 92%;
            position: relative;
        }
        
        .cartright h3 {
            color: white;
            height: 53px;
            border-bottom: 1px solid #9c9c9c;
            margin-bottom: 30px;
        }
        
        .paydetail {
            height: 104px;
            border-top: 1px solid #4c4c4c;
            border-bottom: 1px solid #4c4c4c;
        }
        
        .cartright p {
            color: white;
            margin-top: 19px;
        }
        
        .paydetail .price {
            float: right;
        }
        
        .cartright h2 {
            color: white;
        }
        
        .counttotal {
            float: right;
        }
        
        .order {
            width: 100%;
            height: 53px;
            background: #fff;
            text-align: center;
            line-height: 53px;
            margin-top: 40px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
        }
        
        .cartimg {
            width: 160px;
            height: 129px;
            float: left;
            cursor: pointer;
        }
        
        .cartimg img {
            width: 100%;
            height: 100%;
        }
        
        .carttext {
            width: 431px;
            height: 129px;
            /* background: chocolate; */
            float: right;
            padding: 16px 23px 0 0;
            box-sizing: border-box;
            cursor: pointer;
        }
        
        .delete,
        .editor {
            font-style: normal;
            text-decoration: underline;
            color: #444;
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;
        }
        
        #template1 {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="top">
        <div class="top-left">
            <img src="img/logo.png" alt="" class="SKECHER" style="cursor: pointer;">
            <ul class="top-list">
                <li class="man">男子</li>
                <li class="woman">女子</li>
                <li class="children">儿童</li>
                <li class="newgood">新品抢鲜</li>
                <li class="type">系列</li>
                <li class="common">明星同款</li>
            </ul>
        </div>
        <div class="top-right">
            <div class="right-search">
                <input type="text" name="" id="search" placeholder="搜索">
                <div class="search-con"></div>
            </div>
            <div class="top-login">
                <div class="login-icon"></div>
                <span class="login"> <span class="gocenter">登录</span> |<span class="trycenter">注册</span></span>
            </div>
            <div class="top-shop">
                <div class="shop-icon">
                    <div class="red-con">0</div>
                </div>
                <span class="shop">购物车</span>
            </div>

        </div>
    </div>
    <div class="top-banner1" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>BARREL合作款</li>
                    <li>JEREMYVILLE联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>上衣/T恤</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/1l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner2" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>美少女联名款</li>
                    <li>吾皇联名款</li>
                    <li>FELIX猫联名款</li>
                    <li>横冲直撞20岁</li>
                    <li>BARREL合作款</li>
                    <li>HELLOKITTY联名款</li>
                    <li>JEREMYVILLE联名款</li>
                    <li>RICOSTRU联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>运动内衣</li>
                    <li>上衣/T恤</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/2l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner3" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>汪汪队</li>
                </ul>
            </div>
            <div class="middle">
                <p>男童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
            <div class="right">
                <p>女童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>

        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/3l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner4" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/mp1.jpg"" alt="">
                </dt>
                <dd>D'LITES系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp2.jpg" alt=""></dt>
                <dd>MARK NASON系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp3.jpg" alt=""></dt>
                <dd>ON THE GO系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp4.jpg" alt=""></dt>
                <dd>GO RUN系列&gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp5.jpg" alt=""></dt>
                <dd>BOBS系列 &gt;</dd>
            </dl>
        </div>
        <a href="" class="more">查看更多系列 &gt;</a>
    </div>
    <div class="top-banner5" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/star4.jpg" alt="">
                </dt>
                <dd>唐嫣 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/star3.jpg" alt=""></dt>
                <dd>吴尊&gt;</dd>
            </dl>
        </div>
    </div>
    <div class="content">
        <div class="content-con">
            <div class="title "><span></span><span>&nbsp;购物车</span></div>
            <div class="contentL"></div>
            <div class="contentR">
                <img src="img/1015.jpg " alt=" " width="100% " style="cursor: pointer; ">
                <div class="carttitle">
                    <div class="carttitle-text">您的购物车里没有商品</div>
                    <hr>
                    <div class="cartleft">
                        <div class="cartleftlist" id="template1">
                            <div class='cartimg'><img src="" alt=""></div>
                            <div class="carttext">
                                <h4 class="chinesename"></h4>
                                <h4 class="englishname" style="display: inline-block;"></h4>
                                <span class="price" style="float: right;"></span>
                                <p style="margin-bottom: 8px;">款号：<span class="number"></span></p>
                                <p>尺码：<span class="selectsize"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>数量：<span class="num"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="color"></span></span>
                                </p>

                                <i class="delete">删除</i>
                            </div>
                        </div>
                    </div>
                    <div class="cartright">
                        <h3>小结信息</h3>
                        <div class="paydetail">
                            <p>商品总额<span class="price">0</span></p>
                            <p>运费金额<span style="float: right;" class="express"></span></p>
                        </div>
                        <h2>支付总额<span class="counttotal"></span></h2>
                        <button class="order">提交订单</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->

    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>
    <script>
        $(".englishname").html(localStorage.getItem('englishname'))
        $('.cartimg img').html(localStorage.getItem("img"))
        $(".price").html(localStorage.getItem("price"))
        $("number").html(localStorage.getItem("number"))
        $(".selectsize").html(localStorage.getItem("selectsize"))
        $(".num").html(localStorage.getItem("num"))
        $(".color").html(localStorage.getItem("color"))
        $(".chinesename").html(localStorage.getItem("chinesename"))
        localStorage.getItem("goodslength")
        let mid = localStorage.getItem('mid')
        console.log(mid)

        let goodsid = sessionStorage.getItem("goodsid")
        let userid = sessionStorage.getItem("userid ")
        $(".title").click(function() {
            location.href = `${address}/goodsdetail.html`
        })

        $.ajax({
                url: `${address}/goodsup`,
                data: {
                    userid: userid,
                    // goodsid: goodsid
                },
                success(data) {

                    console.log(data);
                    if (data === "2") {
                        return;
                    }
                    let cartleft = $(".cartleft");
                    //cartleft.empty();
                    data.forEach(item => {
                        $(".carttitle-text").html(`您的购物车共有${data.length}件商品`)
                        $(".red-con").html(data.length)
                        if (data.length == 0) {
                            $(".carttitle-text").html(`您还没有商品哦`)
                            $("paydetail .price").html("-")
                            localStorage.setItem("goodslength", data.length)
                            return;
                        }
                        // if (data[0].goodsid == goodsid) {
                        //     alert("重复添加")
                        // }
                        let list = $("#template1").clone(true);
                        list.removeAttr("id");
                        list.find('.cartimg img').attr("src", item["img"])
                        list.find(".englishname").html(item.englishname)
                        list.find(".price").html(`￥${item.price}`)
                        list.find('.number').html(item.number)
                        list.find(".selectsize").html(item.size)
                        list.find(".num").html(item.count)
                        list.find(".color").html(item.color)
                        list.find(".chinesename").html(item.chinesename)
                        list.appendTo($(".cartleft"))
                            // localStorage.setItem('englishname', item.englishname)
                            // localStorage.setItem("img", item.img)
                            // localStorage.setItem("price", item.price)
                            // localStorage.setItem("number", item.number)
                            // localStorage.setItem("selectsize", item.size)
                            // localStorage.setItem("num", item.count)
                        localStorage.setItem('mid', item.mid)
                            // localStorage.setItem("color", item.color)
                            // localStorage.setItem("chinesename", item.chinesename)
                        console.log(item)
                        let total = item.price * item.count * data.length
                        let express = item.price * item.count * 0.01 * data.length
                        let totalprice = total + express
                        $(".paydetail .price").html(total)
                        $(".paydetail .express").html(express)
                        $(".counttotal").html(totalprice)
                        localStorage.setItem("total", total)
                        localStorage.setItem("express", express)
                        localStorage.setItem('totalprice', totalprice)

                    });
                }

            })
            //删除购物车数据
        let del = $(".cartleftlist .delete");
        del.click(function(e) {
            var target = e.target;
            $.ajax({
                url: `${address}/deletelist`,
                data: {
                    mid: mid
                },
                success(data) {
                    let total = data.price * data.count * data.length
                    let express = data.price * data.count * 0.01 * data.length
                    let totalprice = total + express
                    target.closest(".cartleftlist").remove();
                    $(".carttitle-text").html(`您的购物车共有${data.length}件商品`)
                    $(".red-con").html(data.length)
                        // localStorage.remove();
                }
            });
        });














        // window.onclick = function(event) {

        //     let _this = event.target || event.srcElement
        //     if (_this.innerHTML == "删除") {
        //         if (confirm("确认删除吗") == true) {
        //             // history.go(0)
        //             $.ajax({
        //                 url: `${address}/deletelist`,
        //                 data: {
        //                     // goodsid: goodsid
        //                     mid: mid
        //                 },
        //                 success(data) {
        //                     // $(".cartleftlist").remove()
        //                     // $(".carttitle-text").html(`您的购物车共有${data.length}件商品`)
        //                     // $(".red-con").html(data.length)
        //                     history.go(0)
        //                 }
        //             })
        //         }
        //     }

        // }
        $(".order").click(function() {
            $.ajax({
                url: `${address}/goodsup`,
                data: {
                    userid: userid,
                    // goodsid: goodsid
                },
                success(data) {
                    location.href = `${address}/order.html`
                    console.log(data)
                }
            })
        })
    </script>
</body>

</html>